<template>
    <div>
        <nav-header>
            <template v-slot:title>我的地址</template>
            <template v-slot:nav-right><span @click="manager">{{managerText}}</span></template>
        </nav-header>

        <div style="margin: 10px 10px 60px 10px;">

            <div
                v-for="item in data"
                style="width: 100%;border-radius: 15px;background-color: #fff;box-shadow: 0 0 6px 3px #eee;padding: 15px;margin-bottom: 10px;">
                <div class="container-fluid">
                    <div v-if="isManager" style="position: relative;text-align: right;height: 20px;"><label @click="choose(item)" class="o-choose" :class="{active: item.is_choose}"><input style="display: none" type="checkbox" /></label></div>
                    <div v-if="!isManager" style="position: relative;text-align: right;height: 20px;"><span @click="edit(item.id)">编辑</span></div>
                    <div class="row" style="padding-bottom: 15px;">
                        <div class="col-xs-6" style="font-size: 15px;font-weight: bold">收件人：</div>
                        <div class="col-xs-6" style="text-align: center">{{item.receiver_name}}</div>
                    </div>
                    <div class="row" style="padding-bottom: 15px;">
                        <div class="col-xs-6" style="font-size: 15px;font-weight: bold">电话号码：</div>
                        <div class="col-xs-6" style="text-align: center">{{item.mobile_number}}</div>
                    </div>
                    <div class="row" style="padding-bottom: 5px;">
                        <div class="col-xs-6" style="font-size: 15px;font-weight: bold">详细地址：</div>
                    </div>
                    <div class="row" style="padding-bottom: 35px;">
                        <div class="col-xs-6">{{item.address}}</div>
                    </div>
                    <div class="row" style="">
                        <div class="col-xs-6" style="font-size: 15px;font-weight: bold">设为默认地址</div>
                        <div class="col-xs-6" style="text-align: right">
                            <label @click="setDefault(item)" class="ios-switch"
                                   :class="{active: item.is_default == 1 ? true : false}">
                                <input style="display: none" type="checkbox">
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="!isManager" @click="add" style="width: 100%;border-radius: 15px;background-color: #fff;box-shadow: 0 0 6px 3px #eee;padding: 15px;margin-bottom: 10px;">
                <div style="padding: 30px">
                    <div style="background-color: #eee;border-radius: 50%;width: 50px;height: 50px;position: relative;margin: 0 auto">
                        <div class="cross"></div>
                    </div>
                </div>
            </div>

            <button v-if="isManager" class="delete" @click="postDelete">删除</button>
            <button v-if="!isManager" v-show="!isEdit" class="post" @click="postPickup">提交</button>

        </div>


    </div>
</template>
<script>
    import NavHeader from "../Layout/NavHeader";
    import swal from "sweetalert";

    export default {
        components: {NavHeader},
        data() {
            return {
                data: [
                    // {
                    //     id: 0,
                    //     receiver_name: '',
                    //     mobile_number: '',
                    //     address: '',
                    //     is_default: 0,
                    //     is_choose: false,
                    // },
                ],
                switchTime: 0,
                chooseTime: 0,
                isManager: false,
                isEdit: true,
                managerText: '管理',
                delIds: [],
                order_id: 0,
            }
        },
        created() {
        },
        mounted() {
            this.order_id = this.$route.params.order_id;
            this.getAddressList();
            if (this.order_id != undefined) {
                this.isEdit = false;
            }
        },
        methods: {
            getAddressList() {
                let wx_openid = localStorage.getItem('wx_openid');
                let that = this;
                this.api.getAddressList(wx_openid).then(res => {
                    if (res.data) {
                        that.data = res.data;
                    }
                });
            },
            setDefault(item) {
                let now = +new Date();
                if (now - this.switchTime < 500) {
                    return;
                }
                if (item.is_default == 1) {
                    item.is_default = 0;
                } else if (item.is_default == 0) {
                    item.is_default = 1;
                }
                this.switchTime = now;
                let wx_openid = localStorage.getItem('wx_openid');
                this.api.postAddressDefault(wx_openid, item.id).then(res => {
                    if (res.meta.code == '000') {
                        swal("操作成功").then((value) => {
                            window.location.reload();
                        });
                    }
                })
            },
            choose(item) {
                let now = +new Date();
                if (now - this.chooseTime < 500) {
                    return;
                }
                this.chooseTime = now;
                if (!item.is_choose) {
                    this.delIds.push(item.id);
                } else {
                    this.delIds = this.delIds.filter(function (d) {
                        return d != item.id
                    });
                }
                item.is_choose = !item.is_choose;
            },
            add() {
                if (this.isManager) {
                    return;
                }
                window.location.href = '/address-edit'
            },
            edit(id) {
                if (this.isManager) {
                    return;
                }
                window.location.href = '/address-edit/' + id;
            },
            manager() {
                this.isManager = !this.isManager;
                if (this.isManager) {
                    this.managerText = '完成';
                } else {
                    this.managerText = '管理';
                    this.date.forEach(function (item) {
                        item.is_choose = false;
                    })
                }
            },
            postDelete() {
                this.api.postAddressDelete(this.delIds).then(res => {
                    if (res.meta.code == '000') {
                        swal("操作成功").then((value) => {
                            window.location.reload();
                        });
                    }
                });
            },
            postPickup() {
                let id = 0;
                this.data.forEach(function (item) {
                    if (item.is_default == 1) {
                        id = item.id;
                    }
                });
                if (id == 0) {
                    swal("请选择默认地址");
                    return;
                }
                this.api.postPickup(this.order_id, id).then(res => {
                    if (res.meta.code == '000') {
                        swal("申请成功");
                    } else {
                        swal(res.meta.msg);
                    }
                })
            }
        },
    }
</script>
<style type="less">
    label.o-choose {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid gray;
    }

    label.active.o-choose {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: none;
        color: #fff;
        background-color: rgb(192, 92, 50);
    }
    label.active.o-choose:after {
        content: '✔';
        position: absolute;
        right: 3px;
        top: 0;
    }

    .ios-switch {
        border-radius: 31px;
        width: 42px;
        height: 28px;
        background-color: #fff;
        outline: none;
        box-shadow: inset 0 2px 4px gray;
        position: relative;
    }

    label.ios-switch:after {
        content: '';
        position: absolute;
        left: -12px;
        bottom: -3px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #e9e9eb;
    }

    label.active.ios-switch:after {
        content: '';
        position: absolute;
        left: 20px;
        bottom: -3px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: rgb(192, 92, 50);
    }

    .cross {
        background: #fff;
        height: 30px;
        position: absolute;
        width: 5px;
        left: 22.5px;
        top: 10px;
    }

    .cross:after {
        background: #fff;
        content: "";
        height: 5px;
        left: -12.5px;
        position: absolute;
        top: 12.5px;
        width: 30px;
    }

    .delete {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 50px;
        line-height: 50px;
        background-color: rgb(214, 111, 84);
        color: #FAFAFA;
        border: none;
        text-align: center;
    }

    .post {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 50px;
        line-height: 50px;
        background-color: rgb(214, 111, 84);
        color: #FAFAFA;
        border: none;
        text-align: center;
    }

    /*.ios-switch {*/
    /*    position: relative;*/
    /*    appearance: none;*/
    /*    cursor: pointer;*/
    /*    transition: all 100ms;*/
    /*@extend . btn;*/

    /*    &::before {*/
    /*        position: absolute;*/
    /*        content: "";*/
    /*        transition: all 300ms cubic-bezier(.45, 1, .4, 1);*/
    /*    @extend . btn;*/
    /*    }*/

    /*    &::after {*/
    /*        position: absolute;*/
    /*        left: 4px;*/
    /*        top: 4px;*/
    /*        border-radius: 27px;*/
    /*        width: 54px;*/
    /*        height: 54px;*/
    /*        background-color: #fff;*/
    /*        box-shadow: 1px 1px 5px rgba(#000, .3);*/
    /*        content: "";*/
    /*        transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);*/
    /*    }*/

    /*    &:checked {*/
    /*        background-color: #5eb662;*/

    /*        &::before {*/
    /*            transform: scale(0);*/
    /*        }*/

    /*        &::after {*/
    /*            transform: translateX(40px);*/
    /*        }*/
    /*    }*/
    /*}*/

</style>
